<template>
	<view>
		<view>
			<u-tabs-swiper ref="uTabs" :list="tabList" :current="currentTabIndex" @change="tabIndexChange"
				:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper class="swiper" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<custom-mallmenu-scrollview :categoryList="classifyList" categoryName="name" subCategoryKey="children"
					subCategoryName="name" subCategoryIcon="imgPath" />
			</swiper-item>
			<swiper-item class="swiper-item">
			<custom-mallmenu-scrollview :categoryList="naviList" categoryName="name" subCategoryKey="articles"
				subCategoryName="title" subCategoryIcon="imgPath" />
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
					name: "体系"
				}, {
					name: "导航"
				}],
				// 当前tab的索引
				currentTabIndex: 0,
				// 当前swiper的索引
				swiperCurrent: 0,
				// 分类列表
				classifyList: [],
				// 导航集合
				naviList: [],
			}
		},
		onLoad() {
			this.loadClassifyData();
			this.loadNaviData();
		},
		methods: {
			async loadClassifyData() {
				let classifyListData = await this.$u.api.getClassifyList();
				let time = new Date();
				this.classifyList = classifyListData.map(classifyItem => {
					classifyItem.children.map(childrenItem => {
						childrenItem.imgPath =
							`http://placeimg.com/64/64/nature?t=${time.getTime() + Math.random()*10}`;

						return childrenItem;
					})

					return classifyItem;
				});
			},

			async loadNaviData() {
				let classifyListData = await this.$u.api.getNaviList();
				let time = new Date();
				
				this.naviList = classifyListData.map(classifyItem => {
					classifyItem.articles.map(childrenItem => {
						childrenItem.imgPath =
							`http://placeimg.com/64/64/nature?t=${time.getTime() + Math.random()*10}`;
				
						return childrenItem;
					})
				
					return classifyItem;
				});
			},

			tabIndexChange(index) {
				this.currentTabIndex = index;
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.currentTabIndex = current;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.swiper {
		height: 100vh;
	}

	.swiper-item {
		height: 100%;
		background-color: pink;
	}
</style>
